<template>
  <div class="container">
    <!-- 表单区域 -->
    <section class="app-main">
      <SeachTop>
        <template #left>
          <p>仓库编号</p>
        </template>
        <template #middle>
          <p>仓库名称</p>
        </template>
      </SeachTop>
      <div class="bottom">
        <!-- 表格区域 -->
        <el-card>
          <el-button type="primary" round class="new" @click="add">新增仓库</el-button>
          <el-table :data="list" border style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="90"
              align="center"
            />
            <el-table-column
              prop="code"
              label="仓存编码"
              width="150"
              align="center"
            />
            <el-table-column
              prop="name"
              label="仓库名称"
              width="120"
              align="center"
            />
            <el-table-column label="仓库类型" width="120" align="center">
              <template #default="scope">
                {{ storetype[scope.row.type] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="location"
              label="省/市/区"
              width="200"
              align="center"
            />
            <el-table-column
              prop="address"
              label="详细地址"
              width="200"
              align="center"
            />
            <el-table-column label="仓库状态" width="120" align="center">
              <template #default="scope">
                {{ statup[scope.row.status] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="surface"
              label="仓库面积"
              width="200"
              align="center"
            />
            <el-table-column
              prop="includedNum"
              label="仓库数量"
              width="200"
              align="center"
            />
            <el-table-column
              prop="personName"
              label="负责人"
              width="200"
              align="center"
            />
            <el-table-column
              prop="phone"
              label="联系电话"
              width="200"
              align="center"
            />
            <el-table-column
              prop="updateTime"
              label="更新时间"
              width="200"
              align="center"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center"
            >
              <template #default="{row}">
                <el-button type="text" size="small" @click="edit(row.id)">编辑</el-button>
                <el-button type="text" size="small" @click="show(row)">{{ row.status==0?'启用':'停用' }}</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-divider />
          <!-- 分页 -->
          <el-pagination
            class="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </div>
    </section>
    <!-- 弹窗 -->
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @close="closedialog"
    >
      <span>确定要{{ state }} : {{ name }} 吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="closedialog">取 消</el-button>
        <el-button type="primary" round @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SeachTop from '@/components/SeachTop'
import { queryStorehouse, rework } from '@/api'
export default {
  components: {
    SeachTop
  },
  data() {
    return {
      // arr: [
      //   { value: 0, label: '停用' },
      //   { value: 1, label: '启用' },
      //   { value: 2, label: '全部' }
      // ],
      dialogVisible: false,
      name: '',
      state: '',
      status: '',
      id: '',
      statup: {
        // 枚举仓库状态
        0: '停用 ',
        1: '启用'
      },
      storetype: {
        // 枚举仓库类型
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      params: {
        // 页面查询参数
        like_code: '',
        like_name: '',
        current: 1,
        size: 10,
        descs: 'createTime'
      },
      // 表格数据
      list: [],
      total: 0
    }
  },
  computed: {
    title() {
      return this.status === 0 ? '确认启用' : '确认停用'
    }
  },
  created() {
    this.fetchStorehouse()
  },
  methods: {
    show(row) { // 打开弹窗
      this.dialogVisible = true
      this.status = row.status === 0 ? 1 : 0
      this.name = row.name
      this.id = row.id
      this.state = row.status === 0 ? '启用' : '停用'
    },
    closedialog() { // 关闭弹窗
      this.dialogVisible = false
    },
    async submit() { // 弹窗确定时的回调
      await rework({ id: this.id, status: this.status })
      this.closedialog()
      this.fetchStorehouse()
    },
    // 进入页面查询仓库
    async fetchStorehouse() {
      const res = await queryStorehouse(this.params)
      this.list = res.data.records
      this.total = res.data.total
      this.params.size = +res.data.size
    },
    handleCurrentChange(val) {
      // 分页
      this.params.current = val
      this.fetchStorehouse()
    },
    handleSizeChange(val) {
      this.params.size = val
      this.fetchStorehouse()
    },
    add() { // 新增
      this.$router.push(`/manage-base-info/warehouse/details/null`)
    },
    edit(id) { // 编辑
      this.$router.push(`/manage-base-info/warehouse/details/${id}`)
    }
  }
}
</script>

<style lang="scss">
.app-main {
  background-color: #fdfafa;
  // width: 100%;
  position: relative;
  overflow: hidden;
  margin: 20px 20px;
}
.top {
  margin-bottom: 20px;
}
.formlog {
  display: flex;
  justify-content: space-around;
}
.right {
  margin-top: 65px;
  margin-left: 55px;
}
.new {
  margin-bottom: 15px;
}
.page{
  text-align: center;
}
</style>
